<!DOCTYPE html>
<html>
  <head>
    <title>小样种草机</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-ms/minireset.css/0.0.2/minireset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1534407_mj4m6393aya.css">
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-ms/promise-polyfill/8.2.0/polyfill.min.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-ms/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-ms/vue/3.0.11/vue.global.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-ms/vant/3.2.4/vant.min.js"></script>
    <script src="https://img.bc.haodanku.com/cms/SpaUtils.min.js"></script>
    <script src="https://img.bc.haodanku.com/cdn/vant-touch-emulator.js"></script>
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-ms/vant/3.2.4/index.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://img.bc.haodanku.com/cdn/locss.css">
    <meta name="referrer" content="no-referrer">
    <script src="https://img.bc.haodanku.com/cdn/tsUtils.js"></script>
    <script defer>document.write('<link rel="stylesheet" href="https://img.bc.haodanku.com/cms/tb_minishop.css?t=' + (Date.now() - Date.now() % (60 * 1000 * 30)) + '"/>')</script>
  </head>
  <body>
    <template id="c-card">
      <div class="card row _ flex-c">
        <img class="cover" v-lazy="item.itempic" v-if="item.itempic"/>
        <img
          class="cover"
          src="http://img.bc.fqapps.com/fudai13cae4ae6ef16739ed3b100a2ec39e97.gif"
          alt=""
          v-else
        />
        <div class="detail">
          <div class="title">
            <span>{{ item.itemshorttitle || item.itemtitle }}</span>
          </div>
          <div class="shop-name-warp">
            <div class="shop-name _ flex-c" v-if="item.shopname">
              <img v-if="item.shopname" class="icon" src="https://img.bc.haodanku.com/cms/1646039788" :alt="item.shop_name"/>
              <span v-if="item.shopname" class="value">{{ item.shopname }}</span>
            </div>
          </div>
          <div class="tags">
            <div v-for="tab in item.new_label" class="tag _ flex-c-c">{{tab}}</div>
          </div>
          <div class="price">
            <div class="end-price">
              <div class="label">抢购价</div>
              <div class="value">￥<strong>{{ Number(item.itemendprice) }}</strong></div>
            </div>
            <div class="origin">
              <del>￥{{ Number(item.itemprice) }}</del>
            </div>
          </div>
          <div class="btn-block">
            <div class="_ btn btn-order">
              <span v-on:click.capture="buy">立即下单</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template id="c-share">
      <div class="footer-share _ lr-c">
        <div id="share_href" v-on:click="handleShare">
          <div class="share-content _ flex-c">
            <i>
              <svg xmlns="http://www.w3.org/2000/svg" id="svg-icon" data-name="图层 1" viewBox="0 0 18 19.11">
                <title>分享</title>
                <path class="cls-1" d="M17.5,8A2.5,2.5,0,1,0,15,5.5,2.5,2.5,0,0,0,17.5,8Z" transform="translate(-3 -2)"/>
                <path class="cls-1" d="M6.5,14.5A2.5,2.5,0,1,0,4,12,2.5,2.5,0,0,0,6.5,14.5Z" transform="translate(-3 -2)"/>
                <path class="cls-2" d="M15,6.79,8.67,10.62" transform="translate(-3 -2)"/>
                <path class="cls-2" d="M8.67,13.28,13.27,16" transform="translate(-3 -2)"/>
                <path class="cls-1" d="M15.77,15.11a2.5,2.5,0,1,1-2.5,2.5A2.5,2.5,0,0,1,15.77,15.11Z"
                      transform="translate(-3 -2)"/>
              </svg>
            </i>
            <span>分享好友</span>
          </div>
        </div>
      </div>
    </template>

    <div id="single-page-app" v-cloak>
      <van-pull-refresh v-model="refreshing" @refresh="reGetListData">
        <van-list class="page-container" v-bind:loading="listData.loading" v-bind:finished="listData.finished"
                  v-on:load="getListData"><!-- 底部提示 -->
          <template v-slot:finished v-if="listData.list.length"><span class="list-item-loading">-优惠到底啦-</span></template>
          <template v-slot:loading><span class="list-item-loading">数据正在赶来的路上...</span></template>
          <div class="banner-wrapper" ref="bannerRef"><img class="free-banner" v-bind:src="banner" alt=""></div>
          <van-sticky class="fixed-box">
            <div class="free-navbar">
              <div class="free-navbar-class">
                <span class="active-bg" v-bind:style="{left:(switchData.activeIndex / switchData.list.length * 100) + '%',width:(100/switchData.list.length)+'%'}"></span>
                <span v-for="(item, index) in switchData.list" v-bind:class="{'active': item.value == switchData.selected}" v-on:click="handleNavbar(item, index)">
                  <img :src="item.image" alt="">
                  <div>{{ item.name }}</div>
                </span>
              </div>
            </div>
            <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词/链接" @search="onSearch"
                        @clear="onSearchClear">
              <template v-slot:action>
                <div class="_ flex-c-c" @click="onSearch">搜索</div>
              </template>
            </van-search>
          </van-sticky>
          <div class="page-content" ref="list" v-bind:class="{'empty-list':!listData.list.length}">
            <div class="lists" ref="listsRef" v-if="listData.list.length || listData.finished">
              <card v-for="(item, index) in listData.list" v-bind:item="item" v-bind:key="item.itemid"
                    v-on:transfer="handleGoodsTransfer"></card>
            </div>
            <div class="empty" v-show="!listData.list.length &amp;&amp; !loading">
              <div class="empty-box"><img src="http://img.bc.haodanku.com/cms/1627883509">
                <div class="text">暂无数据~</div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
      <div class="back-top-wrap max-width" v-movable>
        <div class="_ btn back-top" v-on:click="backTop" v-bind:class="{hide: scrollTop &lt; 600}"></div>
      </div>
      <share v-on:share="handleShare" v-bind:class="{hide:isScrollToDown}"></share>
      <van-overlay v-bind:show="loading">
        <van-loading color="#0094ff"></van-loading>
      </van-overlay>
    </div>
    <script>
      function useBase() {
  const listDataStr = JSON.stringify({
    list: [],
    loading: false,
    finished: false,
    min_id: 1,
    pageTotal: 1,
    pageCurrent: 0
  });

  const scrollTop = Vue.ref(0);
  const listData = Vue.reactive(JSON.parse(listDataStr));

  // 根据微信浏览器缩放比例设置rem缩放
  if(SpaUtils.inWechat() && "ontouchstart" in window) {
    const scale = SpaUtils.getFontScale(true);
    document.documentElement.style.fontSize =
      "calc(13.33333vw * " + scale + ")";
  }

  return {
    listDataStr,
    data: {
      scrollTop,
      listData
    },
    useScrollEndMounted(onScrollEnd, onNotScrollEnd) {
      Vue.onMounted(function() {
        window.addEventListener("scroll", function(ev) {
          scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
          if(SpaUtils.isScrollEnd(this, "vertical", 40)) {
            onScrollEnd && onScrollEnd();
          } else {
            onNotScrollEnd && onNotScrollEnd();
          }
        });
      });
    },
    methods: {
      onScrollEnd() {
        this.getListData();
      },
      handleShare() {
        SpaUtils.copy(location.href, "复制成功，分享给身边好友吧~");
      },
      resetListData(isCleanList = true) {
        Object.assign(
          listData,
          JSON.parse(listDataStr),
          isCleanList ? undefined : {list: listData.list}
        );
      }
    }
  };
}function getComponents() {
  const Card = Vue.defineComponent({
    template: "#c-card",
    props: {
      item: Object
    },
    emits: ["transfer"],
    setup(props, ctx) {
      return {
        buy(e, type = "buy") {
          ctx.emit("transfer", {e, item: props.item, type});
        },
        getMoneyStr: SpaUtils.numWan
      };
    }
  });
  const Share = Vue.defineComponent({
    template: "#c-share",
    emits: ["show-directer"],
    setup(props, ctx) {
      return {
        handleShare() {
          ctx.emit("share");
        },
        showDirecter() {
          ctx.emit("show-directer");
        }
      };
    }
  });
  return {card: Card, share: Share};
}

    </script>
    <script>window.onload = function() {
  const stamp = Date.now() - (Date.now() % (60 * 1000 * 30));
  const app = Vue.createApp({
    name: "App",
    directives: {
      movable: SpaUtils.movable
    },
    components: getComponents(),
    setup() {
      const {
        data: baseData,
        methods: baseMethods,
        useScrollEndMounted
      } = useBase();
      const customParams = useCustomParams();
      const data = {
        ...baseData,
        banner: "https://img.bc.haodanku.com/cms/1646037895?t=" + stamp,
        top: 0,
        loading: Vue.ref(false),
        refreshing: Vue.ref(false),
        isScrollToDown: Vue.ref(false),
        searchValue: Vue.ref(""),
        from: SpaUtils.parseSearch().from || 1,
        switchData: Vue.reactive({
          list: [
            {
              name: "淘宝",
              value: 1,
              image: 'https://img.bc.haodanku.com/cms/1695880541'
            },
            {
              name: "京东",
              value: 2,
              image: 'https://img.bc.haodanku.com/cms/1695880549'
            },
          ],
          selected: 1,
          activeIndex: 0
        }),
        ...customParams
      };
      const methods = {
        ...baseMethods,
        handleNavbar: function(item, index) {
          if(data.listData.loading || data.switchData.activeIndex === index) return;
          data.switchData.activeIndex = index;
          data.switchData.selected = item.value;
          methods.backTopAndReGetListData()
        },
        backTop() {
          $("html,body").animate({scrollTop: 0});
        },
        backTopAndReGetListData() {
          methods.resetListData(false);
          methods.backTop();
          return methods.getListData(true);
        },
        reGetListData() {
          methods.resetListData(false);
          return methods.getListData(true);
        },
        onSearchClear() {
          data.searchValue.value = "";
          methods.backTopAndReGetListData();
        },
        onSearch() {
          methods.backTopAndReGetListData();
        },
        async getListData(clean) {
          const loading = data.loading;
          const listData = data.listData;
          if(loading.value || listData.loading || listData.finished) return Promise.reject();
          listData.loading = true;
          if(clean) {
            loading.value = true;
          }
          try {
            const min_size = 10;
            const param = {
              ...customParams.getListDataParams(),
              keyword: data.searchValue.value,
              min_id: data.listData.min_id,
              back: min_size,
              type: data.switchData.selected
            };
            const url = "https://v2.api.haodanku.com/makeup_items";
            const res = await SpaUtils.Request.get(url, param).promise;
            const list = res.data || [];

            setTimeout(() => {
              listData.list = clean ? list : listData.list.concat(list);
              listData.finished =
                listData.min_id == res.min_id ||
                !list.length ||
                list.length < min_size;
              listData.min_id = res.min_id || listData.min_id;
            }, 200);
            return res;
          } catch(e) {
            listData.list = [];
            listData.finished = true;
          } finally {
            setTimeout(() => {
              listData.loading = false;
              loading.value = false;
              data.refreshing.value = false;
            }, 200);
          }
        },
        /**
         * 商品转链
         * @param e {MouseEvent}
         * @param item
         */
        async handleGoodsTransfer({e, item}) {
          console.log('type', data.switchData.selected);
          let type = data.switchData.selected;
          if (type == 1) {
            const param = {
              itemid: item.itemid,
              title: item.itemshorttitle || item.itemtitle,
              pid: "mm_1520060136_2232550319_111181400478", //淘宝PID 必填
              tb_name: "tb370655212", //好单库后台已授权的淘宝昵称 必填
              get_taoword: 1,
              ...customParams.getTransferParams()
            };

            const loading = data.loading;
            loading.value = true;
            try {
              // http://v2.api.haodanku.com/get_jditems_link
              const transferUrl = SpaUtils.addProtocol("v2.api.haodanku.com/ratesurl");
              const params = {
                platformType: "tb",
                itemData: item,
                url: customParams.getTransferUrl ? customParams.getTransferUrl() : transferUrl,
                el: e.target,
                data: param,
                copySuccessMsg: "复制口令成功,请打开淘宝领取",
                requestCB(res) {
                },
                getCopyTarget(res) {
                  if(typeof res.data === "object") {
                    return "0" + res.data.taoword + "/";
                  }
                  return res.data;
                }
              };
              const utils = window.SdkUtils || window.SpaUtils;
              await utils.conversionLink(params);
            } catch(e) {
              SpaUtils.toast(e.msg || "转链失败");
            } finally {
              setTimeout(function() {
                loading.value = false;
              }, 200);
            }
          } else {
            const param = {
              material_id: item.itemid,
              title: item.itemshorttitle || item.itemtitle,
              union_id: "4100569006", //京东unionID 必填
              pid: "2020989427_4100569006_3004015769", //京东PID
              ...customParams.getTransferParams()
            };

            const loading = data.loading;
            loading.value = true;
            try {
              const transferUrl = SpaUtils.addProtocol("v2.api.haodanku.com/get_jditems_link");
              const params = {
                platformType: "jd",
                itemData: item,
                url: transferUrl,
                el: e.target,
                data: param,
                copySuccessMsg: "链接复制成功~",
                requestCB(res) {
                },
                getCopyTarget(res) {
                  if(typeof res.data === "object") {
                    return res.short_url
                  }
                  return res.short_url;
                }
              };
              const utils = window.SdkUtils || window.SpaUtils;
              await utils.conversionLink(params);
            } catch(e) {
              SpaUtils.toast(e.msg || "转链失败");
            } finally {
              setTimeout(function() {
                loading.value = false;
              }, 200);
            }
          }
        }
      };

      function init() {
        useScrollEndMounted();
        Vue.watch(baseData.scrollTop, (n, o) => {
          data.isScrollToDown.value = n > o;
        });
      }

      init();
      return {...data, ...methods};
    }
  });
  app.use(vant);
  app.use(vant.Lazyload, {
    lazyComponent: true,
    preLoad: 1.3,
    error: "http://img.bc.haodanku.com/haodanku/1595237918",
    loading:
      "http://img.bc.fqapps.com/fudai13cae4ae6ef16739ed3b100a2ec39e97.gif",
    attempt: 1
  });
  app.mount("#single-page-app");
};

    </script>
    <script>
      function useCustomParams() {
        const customParams = {
          apikey: "sylar", //必填
        }
        return {
          customParams,
          // 获取列表数据参数
          getListDataParams() {
            return {apikey: customParams.apikey}
          },
          // 转链参数
          getTransferParams(item) {
            return {...customParams};
          }
        }
      }
    </script>
  </body>
</html>